import { defineComponent, onMounted, ref } from "vue";
import styles from "./insure.module.scss";
import _ from "lodash";
import { $wechatJssdkConfig } from "@/apis/api";
import { useStore as useInsureStore } from "@/store/insure";
import { getUrlCode } from "@/common/util";
import InsureForm from "./components/insureForm/InsureForm";
import NeedLogin from "@/components/NeedLogin/NeedLogin";
import RecordingPrompt from "./components/RecordingPrompt/RecordingPrompt";
import FootNote from "./components/FootNote/FootNote";

export default defineComponent({
  setup() {
    const insureFormRef = ref(null as any);

    const insureStore = useInsureStore();
    insureStore.setNumber(getUrlCode().number);
    onMounted(() => {
      const url = window.location.href.split("#")[0];
      $wechatJssdkConfig({
        url,
      }).then((res: any) => {
        window.wx.config(res.data);
      })
    })
    return () => (
      <>
        <RecordingPrompt />
        <div class={styles.insure}>
          <div class={styles.container}>
            <img class={styles.image} src={require("@/assets/image/insure-header.jpg")} />
            <img class={styles.image} src={require("@/assets/image/insure-ad.jpg")} />
            <img class={styles.image} src={require("@/assets/image/insure-tip.jpg")} />
            <img class={styles.image} src={require("@/assets/image/insure-detail-01.jpg")} />
            <img class={styles.image} src={require("@/assets/image/insure-detail-02.jpg")} />
            <img class={styles.image} src={require("@/assets/image/insure-plan.jpg")} />
            <InsureForm ref={insureFormRef} />
            <div class={styles['add-btn']} onClick={() => insureStore.addInsured()}>添加被保险人</div>
            <img class={styles.image} src={require("@/assets/image/insure-detail-03.jpg")} />
            <img class={styles.image} src={require("@/assets/image/insure-detail-04.jpg")} />
            <img class={styles.image} src={require("@/assets/image/insure-example.jpg")} />
            <img class={styles.image} src={require("@/assets/image/insure-problems-01.jpg")} />
            <img class={styles.image} src={require("@/assets/image/insure-problems-02.jpg")} />
            <img class={styles.image} src={require("@/assets/image/insure-problems-03.jpg")} />
            <img class={styles.image} src={require("@/assets/image/insure-footnote.jpg")} />
            <FootNote/>
          </div>
          <div class={styles.footer}>
            <span class={styles.label}>保费:</span>
            <div class={styles.sum_amounts}>
              {
                insureStore.params.sum_premium > 0 ?
                  <span>{insureStore.params.sum_premium}元</span>
                  :
                  <>
                    <span>{'<'}50周岁 99元/人/年</span>
                    <span>{'≥'}50周岁 149元/人/年</span>
                  </>
              }
            </div>
            <div class={styles.submit} onClick={() => insureFormRef.value.submit()}>立即参保</div>
          </div>
        </div>
        <NeedLogin />
      </>
    )
  }
})